<template>
  <div class="detail">
    <!-- 顶部分享 -->
    <Totip></Totip>

    <!-- 轮播图 -->
    <Swiper :gallery="gallery" :info="info"></Swiper>
    <!-- 标题 -->
    <Title :info="info"></Title>

    <!-- 商品详情 -->
    <div class="de">
      <h6>商品详情</h6>
      <p v-html="info.goods_desc"></p>
    </div>
    <!-- 商品参数 -->
    <Relative :attribute="attribute"></Relative>
    <!-- 商品问题 -->
    <Issue :issue="issue"></Issue>
    <!-- 相关产品 -->
    <About :goodsList="goodsList"></About>

    <!-- 返回顶部 -->
    <van-icon
      name="back-top"
      v-if="gotop1"
      class="to-up"
      size="40"
      color="#fff"
      @click="goTop"
    />

    <!-- 客服，收藏，购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="goCart"
        :badge="badge"
      />
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        :color="isColor ? 'red' : 'gray'"
        @click="color"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 步进器 -->
    <van-sku
      v-model="show"
      ref="sku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @add-cart="onAddCartClicked"
    />
  </div>

  <!-- 返回顶部 -->
</template>

<script>
//引入导航栏组件
import Totip from "@/components/detail/Totip.vue";
//引入轮播图组件
import Swiper from "@/components/detail/Swiper.vue";
//引入标题组件
import Title from "@/components/detail/Title.vue";
//引入相关商品
import About from "@/components/detail/About.vue";
//引入商品参数组件
import Relative from "@/components/detail/Relative.vue";
//详情问题
import Issue from "@/components/detail/Issue.vue";
import {
  GetDetailData, //产品详情接口
  GetGoodsRelatedData, //相关产品
  GetCartNum, //购物车商品数
  AddToCart, //加入购物车
} from "@/https/http.js";
export default {
  name: "VueDetail",
  components: {
    Totip,
    Swiper,
    Title,
    Issue,
    About,
    Relative,
    // Pic,
  },

  data() {
    return {
      badge: '',
      showShare: false, //分享面板的显示
      value: "",
      gotop1: false,
      isColor: false,
      gallery: [],
      info: {},
      name: "",
      attribute: [],
      issue: [], //常见问题
      productList: [], //当前产品信息
      goodsList: [],
      isCollected: false, //是否收藏
      isSkuShow: false, //是否显示商品规格面板
      show: false, //默认不显示加入购物车弹窗
      sku: {
        tree: [], //规格类目数组
        hide_stock: false, //是否隐藏剩余数量
        price: "1.00",
        stock_num: 227, //库存量
      },
      goods: {
        picture: "",
      },
    };
  },

  created() {
    console.log(this.$route.query.id);
    GetDetailData({ id: this.$route.query.id }).then((res) => {
      console.log(888, res);
      this.gallery = res.data.data.gallery; // 轮播图数组
      this.info = res.data.data.info; //商品信息
      this.attribute = res.data.data.attribute; // 商品参数
      this.issue = res.data.data.issue; //常见问题
      this.goods.picture = res.data.data.info.list_pic_url; //默认商品 sku 缩略图
      this.sku.price = res.data.data.info.retail_price.toFixed(2); // 当前商品的价格
      this.sku.stock_num = res.data.data.info.goods_number; //当前 sku 组合对应的库存
      this.productList = res.data.data.productList; // 当前产品信息
      console.log(66, this.sku);
    });
    //相关产品列表接口请求
    GetGoodsRelatedData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(33, res);
      this.goodsList = res.data.data.goodsList; //相关产品的列表
    });
    //获取购物车数量
    GetCartNum().then((res) => {
      if (res.errno == 0) {
        // 购物车商品数量
        this.badge = res.data.cartTotal.goodsCount;
      }
    });
  },

  mounted() {
    let zhen = this;
    document.onscroll = function () {
      if (document.documentElement.scrollTop >= 500) {
        // console.log(document.documentElement.scrollTop);
        zhen.gotop1 = true;
      } else {
        zhen.gotop1 = false;
      }
    };
  },
  methods: {
    goTop() {
      document.documentElement.scrollTop = 0;
    },

    color() {
      this.isColor = true;
    },
    //显示购物车弹窗
    addCart() {
      this.show = true;
    },

    //加入购物车
    onAddCartClicked() {
      console.log(33, this.$route.query.id);
      console.log(22, this.$refs.sku.getSkuData().selectedNum);
      console.log(11, this.productList[0].id);
      AddToCart({
        goodsId: this.$route.query.id, // 地址栏id
        productId: this.productList[0].id, //产品id，在刷新页面时的数据对象下获取productList数组
        number: this.$refs.sku.getSkuData().selectedNum, // 选中的商品数量
      }).then((res) => {
        console.log("加入购物车", res);
        // 更新购物车数量
        this.badge = res.data.data.cartTotal.goodsCount;
        // 显示添加成功
        this.$toast.success("添加成功");
      });
      // 隐藏 商品规格面板

      this.show = false;
    },
    goCart() {
      this.$router.push("/cart");
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  background-color: rgb(245, 244, 244);
  width: 100%;
  height: 100%;
  overflow: auto;

  .van-icon {
    position: fixed;
    right: 10px;
    bottom: 50px;
  }
  h6 {
    margin-top: 20px;
    text-align: center;
  }
  img {
    width: 100%;
  }
  .de {
    width: 100%;
    /deep/p > img {
      width: 100%;
      display: flex;
    }
  }
}
</style>
